<template>
  <div>
    <Table
      border
      :columns="columns"
      :data="item"
      size="large"
      no-data-text="你还没有订单，快点去购物吧"
      v-for="(item, index) in orderList"
      :key="index"
      :loading="loading"
    ></Table>
    <div class="my-order-page-size">
      <Page
        :total="total"
        show-sizer
        @on-change="changePageNum"
        @on-page-size-change="changePageSize"
      ></Page>
    </div>
  </div>
</template>

<script>
import { getOrderByUserId, deleteOrder } from '~/api/orderLocal'
export default {
  name: 'MyOrder',
  data() {
    return {
      //  table渲染格式
      columns: [
        {
          title: '订单号',
          width: 180,
          align: 'center',
          render: (h, params) => {
            let resultStr = ''
            resultStr = params.row.orderSn
            return h('div', resultStr)
          }
        }, {
          title: '标题',
          width: 400,
          align: 'center',
          render: (h, params) => {
            if (params.row.orderItemList.length > 0) {
              return h('div', {
                attrs: {
                  class: 'subCol'
                }
              }, [
                h('ul', params.row.orderItemList.map(item => {
                  return h('li', {
                    attrs: {
                      class: 'my-order-subCol-li'
                    }
                  }, item.goodDetail.name)
                }))
              ])
            } else {
              return h('div', [
                h('span', '----')
              ])
            }
          }
        },
        {
          title: '图片',
          key: 'list',
          align: 'center',
          render: (h, params) => {
            if (params.row.orderItemList.length > 0) {
              return h('div', {
                attrs: {
                  class: 'subCol'
                }
              }, [
                h('ul', params.row.orderItemList.map(item => {
                  return h('li', {
                    attrs: {
                      class: 'my-order-subCol-li'
                    }
                  }, [
                    h('img', {
                      attrs: {
                        src: item.goodDetail.imgUrls
                      },
                      style: {
                        width: '50px'
                      }
                    })
                  ])
                }))
              ])
            } else {
              return h('div', [
                h('span', '----')
              ])
            }
          }
        },
        {
          title: '数量',
          align: 'center',
          render: (h, params) => {
            if (params.row.orderItemList.length > 0) {
              return h('div', {
                attrs: {
                  class: 'subCol'
                }
              }, [
                h('ul', params.row.orderItemList.map(item => {
                  return h('li', {
                    attrs: {
                      class: 'my-order-subCol-li'
                    }
                  }, item.qty)
                }))
              ])
            } else {
              return h('div', [
                h('span', '----')
              ])
            }
          }
        },
        {
          title: '单价',
          width: 68,
          align: 'center',
          render: (h, params) => {
            if (params.row.orderItemList.length > 0) {
              return h('div', {
                attrs: {
                  class: 'subCol'
                }
              }, [
                h('ul', params.row.orderItemList.map(item => {
                  return h('li', {
                    attrs: {
                      class: 'my-order-subCol-li'
                    }
                  }, item.goodDetail.price)
                }))
              ])
            } else {
              return h('div', [
                h('span', '----')
              ])
            }
          }
        },
        {
          title: '购买时间',
          width: 250,
          align: 'center',
          render: (h, params) => {
            let resultStr = ''
            resultStr = params.row.createTime
            return h('div', resultStr)
          }
        },
        {
          title: '总计实付',
          align: 'center',
          render: (h, params) => {
            let resultStr = ''
            resultStr = params.row.payAmount
            return h('div', resultStr)
          }
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  size: 'large',
                  type: 'error'

                },
                on: {
                  'click': () => {
                    this.deleteOrderByOrderSn(params.row.id)
                  }
                }
              }, '移除')
            ])
          }
        }

      ],
      // 商品信息
      orderList: [
      ],
      // 订单总数
      total: 10,
      uid: -1,
      loading: true,
      query: {
        page: 1,
        size: 10
      }
    }
  },
  created() {
    this.uid = this.$store.state.user.userInfo.uid
    this.getOrder()
  },
  methods: {
    // 删除订单
    deleteOrderByOrderSn(id) {
      deleteOrder(id).then(res => {
        if (res.code === 200) {
          let index = -1
          this.orderList.forEach((currentValue, i) => {
            if (currentValue[0].id === id) {
              index = i
            }
          })
          this.orderList.splice(index, 1)
        }
      })
    },
    // 改变页码
    changePageNum(value) {
      this.query.page = value
      this.loading = true
      this.getOrder()
    },
    // 改变单页大小
    changePageSize(value) {
      this.query.size = value
      this.loading = true
      this.getOrder()
    },
    getOrder() {
      getOrderByUserId(this.uid, this.query).then((res) => {
        this.total = res.data.total
        // 包装数据为页面所需格式
        for (let i = 0; i < res.data.list.length; i++) {
          res.data.list[i].orderItemList.forEach(value => {
            value.qty = value.productQuantity
            value.goodDetail = {
              name: value.productName,
              price: value.productPrice,
              imgUrls: [value.productPic]
            }
            value.goodId = value.productId
          })
        }
        res.data.list.forEach(e => {
          this.orderList.push([e])
        })
        this.loading = false
      }).catch((res) => {
      })
    }
  }
}
</script>

<style>
.my-order-page-size {
  margin: 15px 0px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.my-order-subCol-li {
  margin: 0 -18px;
  list-style: none;
  text-align: center;
  padding: 9px;
  border-bottom: 1px solid #ccc;
  overflow-x: hidden;
}
.my-order-subCol-li:last-child {
  border-bottom: none;
}
</style>
